<template>
   <div class="box">
      <label for="pwd">密码:</label>
      <input id="pwd" type="password" v-model="password">
      <div class="tips" :style="{backgroundColor:bc}"></div>
   </div>
</template>

<script>
export default {
  data(){
    return{
      bc:'',
      password:''
    }
  },
  watch:{
    password(newval){
       if(newval.length<=4){
          this.bc="red"
        }else if(newval.length>4&&newval.length<=6){
          this.bc="yellow"
        }else{
          this.bc="springgreen" 
        } 
    }
  }
}
</script>

<style lang="scss">
  .box{
    display: flex;
    .tips{
      width: 100px;
      height: 25px;
      background: #ccc;
      margin-left: 5px;
    }
  }
</style>